<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind绑定class</title>
    <style type="text/css">
        .static{
            width: 100px;
            height: 200px;
            display: block;
            background-color: green;
        }
        .active{
            border: 10px solid dodgerblue;
        }

        .error{
            background-color: red;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>
            v-bind绑定class
        </legend>
        <p>
            v-bind主要用法是动态更新HTML元素上的属性
            在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定，
            它们也是HTML的属性，因此可以使用v-bind 指令。
        </p>
        <fieldset>
            <legend>使用对象语法绑定单个class</legend>
            <div id="app1">
                <!--
                给v-bind:class设置一个对象，可以动态地切换class
                class等同于v-bind:class，是一个语法糖
                -->
                <!--类名static依赖于数据isStatic，当其为true时， div会拥有类名static，为false时则没有-->
                <div :class="{'static':isStatic}">
                    app1→我是div
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>使用对象语法绑定多个class</legend>
            <div id="app2">
                <!--对象中也可以传入多个属性，来动态切换class。另外，：class可以与普通class 共存-->
                <div class="static" :class="{'active':isActive,'error':isError}">
                    app2→我是div
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>使用计算属性绑定class</legend>
            <div id="app3">
                <!--对象中也可以传入多个属性，来动态切换class。另外，：class可以与普通class 共存-->
                <div class="static" :class="classes">
                    app3→我是div
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>使用数组语法绑定class</legend>
            <p>
                当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表
            </p>
            <div id="app4">
                <!--使用数组语法，给:class绑定一个数组，应用一个class列表-->
                <div class="static" :class="[activeCls,errorCls]">
                    app4→我是div
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>使用三元表达式来根据条件切换class</legend>
            <div id="app5">
                <!--使用数组语法+三元表达式来根据条件切换class-->
                <div class="static" :class="[isActive ? activeCls :'',errorCls]">
                    app5→我是div
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend>在数组语法中使用对象语法绑定class</legend>
            <div id="app6">
                <!--在数组语法中使用对象语法绑定class-->
                <div class="static" :class="[{'active':isActive},errorCls]">
                    app6→我是div
                </div>
            </div>
        </fieldset>
    </fieldset>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app1 = new Vue({
        el:"#app1",
        data:{
            isStatic:true
        }
    });

    var app2 = new Vue({
        el:"#app2",
        data:{
            isActive:true,
            isError:false
        }
    });

    var app3 = new Vue({
        el:"#app3",
        data:{
            isActive : true ,
            isError : false
        },
        computed:{//计算属性
            classes:function () {
                return {
                    active : this.isActive && !this.isError,
                    error:this.isError
                };
            }
        }
    });

    var app4 = new Vue({
        el:"#app4",
        data:{
            activeCls:"active",
            errorCls:"error"
        }
    });

    var app5 = new Vue({
        el:"#app5",
        data:{
            isActive:true,
            activeCls:"active",
            errorCls:"error"
        }
    });

    var app6 = new Vue({
        el:"#app6",
        data:{
            isActive:true,
            errorCls:"error"
        }
    });
</script>